import { TabBar } from 'antd-mobile'
import {
  useNavigate,
  useLocation,
  MemoryRouter as Router,
} from 'react-router-dom'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
const tabs = [
    {
      key: '/home/shophome',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/home/my',
      title: '订单',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/home/myshopcar',
      title: '购物车',
      icon: <MessageOutline />,
    },
    {
      key: '/home/address',
      title: '地址',
      icon: <MessageOutline />,
    }
  ]

  
  function Anttab() {
    // const history = useHistory()
    const location = useLocation()
    const { pathname } = location
    const navigate = useNavigate()
    const setRouteActive = (value) => {
        console.log(value);
       navigate(value)
    }
   
  return (
    <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
      {tabs.map(item => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
  )
  }
  
  export default Anttab